<template>
  <div style="border: 1px solid #00d2ff;
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin-inline: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px"
  >讲台</div>
  <div class="matrix-container" :style="{ width: '1000px' }">
    <div
        v-for="(row, rowIndex) in completeMatrix"
        :key="rowIndex"
        class="matrix-row"
    >
      <div
          v-for="(cell, colIndex) in row"
          :key="colIndex"
          class="matrix-cell"
          :style="{
          width: cellWidth + 'px',
          height: cellHeight + 'px'
        }"
      >
        <div class="cell-content" :class="{empty: !cell.use}" :style="{fontSize: cellHeight/4+'px'}">
          <span v-if="cell.use && cell.name">{{ cell.name }}</span>
          <span v-if="!cell.use">空</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  matrixData: {
    type: Array,
    required: true,
    default: () => [],
    validator(value) {
      return true; // 验证逻辑简化，由组件内部处理
    }
  },
  rows: {
    type: Number,
    required: true,
    default: 0,
    validator(value) {
      return value >= 1 && value <= 20;
    }
  },
  cols: {
    type: Number,
    required: true,
    default: 0,
    validator(value) {
      return value >= 1 && value <= 20;
    }
  }
});

// 生成完整的矩阵（填充缺失的单元格）
const completeMatrix = computed(() => {
  const defaultCell = { isUse: false, name: '' };
  const matrix = Array.from({ length: props.rows }, () =>
      Array.from({ length: props.cols }, () => ({ ...defaultCell }))
  );

  // 合并传入的 matrixData
  props.matrixData.forEach((rowData, rowIndex) => {
    if (rowIndex >= props.rows) return;
    rowData.forEach((cellData, colIndex) => {
      if (colIndex >= props.cols) return;
      matrix[rowIndex][colIndex] = { ...defaultCell, ...cellData };
    });
  });

  return matrix;
});

// 动态计算单元格尺寸
const cols = computed(() => props.cols);
const cellWidth = computed(() => {
  if (cols.value <= 0) return 0;
  const availableWidth = 1000 - (cols.value - 1) * 4; // 4px是列间隔
  return availableWidth / cols.value;
});
const cellHeight = computed(() => cellWidth.value / 3); // 高度是宽度的1/3
</script>

<style scoped>
.matrix-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 1010px;
  min-height: 170px;
  overflow: auto;
}

.matrix-row {
  display: flex;
  gap: 4px; /* 列间隔 */
}

.matrix-cell {
  position: relative;
  box-sizing: border-box;
}

.cell-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #333;
  border: 1px solid #333;
}
.empty {
  background-color: #f0f0f0;
}
</style>